:root {
    --user-monospace: 'Luxi Mono', "PingFang SC", monospace;
}

html {
    font-size: 16px;
}

body {
    font-family: "SF Pro Display", "PingFang SC", sans-serif !important;
}

h1 {
    font-size: 2.25em;
    line-height: 1.2;
    border-bottom: 1px solid #eee;
}

h2 {
    font-size: 1.75em;
    line-height: 1.225;
}

h3 {
    font-size: 1.5em;
    line-height: 1.43;
}

h4 {
    font-size: 1.25em;
}

h5 {
    font-size: 1em;
}

h6 {
    font-size: 1em;
    color: #777;
}

code,
.CodeMirror pre {
    font-family: var(--user-monospace) !important;
    font-size: 14px;
}

#write {
    width: 100% !important;
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px;
    padding-bottom: 100px;
}

#write .CodeMirror {
    padding: 5px 0;
}

#write code {
    margin: 0 2px;
    padding: 0.1em 0.35em;
    border-radius: 3px;
    background: #263238;
    color: #FFCB6B;
    vertical-align: baseline;
    font-weight: 400;
    font-size: 14px;
}

[md-inline="code"]>code {
    padding: 0;
    background-color: initial;
    border: initial;
}

div.code-tooltip {
    background: inherit;
}

#write pre.ty-contain-cm {
    background-color: #263238;
    border-radius: 6px;
}

#write pre.ty-contain-cm span.ty-input {
    background-color: #263238;
    color: white;
    font-family: var(--user-monospace);
}

div.CodeMirror-linenumber {
    font-family: var(--user-monospace);
    font-size: .9rem;
}

.cm-s-inner.CodeMirror {
    background-color: #263238;
    color: #EEFFFF;
    border-radius: 6px;
}

.cm-s-inner .CodeMirror-gutters {
    background: #263238;
    color: #546E7A;
    border: none;
}

.cm-s-inner span.cm-error {
    color: white;
}

#about-content-license-button {
    color: inherit;
}

.cm-s-inner .CodeMirror-guttermarker,
.cm-s-inner .CodeMirror-guttermarker-subtle,
.cm-s-inner .CodeMirror-linenumber {
    color: #546E7A;
}

.cm-s-inner .CodeMirror-cursor {
    border-left: 1px solid #FFCC00;
}

.cm-s-inner.cm-fat-cursor .CodeMirror-cursor {
    background-color: #5d6d5c80 !important;
}

.cm-s-inner .cm-animate-fat-cursor {
    background-color: #5d6d5c80 !important;
}

.cm-s-inner div.CodeMirror-selected {
    background: rgba(128, 203, 196, 0.2);
}

.cm-s-inner.CodeMirror-focused div.CodeMirror-selected {
    background: rgba(128, 203, 196, 0.2);
}

.cm-s-inner .CodeMirror-line::selection,
.cm-s-inner .CodeMirror-line>span::selection,
.cm-s-inner .CodeMirror-line>span>span::selection {
    background: rgba(128, 203, 196, 0.2);
}

.cm-s-inner .CodeMirror-line::-moz-selection,
.cm-s-inner .CodeMirror-line>span::-moz-selection,
.cm-s-inner .CodeMirror-line>span>span::-moz-selection {
    background: rgba(128, 203, 196, 0.2);
}

.cm-s-inner .cm-keyword {
    color: #C792EA;
}

.cm-s-inner .cm-operator {
    color: #89DDFF;
}

.cm-s-inner .cm-variable-2 {
    color: #EEFFFF;
}

.cm-s-inner .cm-variable-3,
.cm-s-inner .cm-type {
    color: #f07178;
}

.cm-s-inner .cm-builtin {
    color: #FFCB6B;
}

.cm-s-inner .cm-atom {
    color: #F78C6C;
}

.cm-s-inner .cm-number {
    color: #FF5370;
}

.cm-s-inner .cm-def {
    color: #82AAFF;
}

.cm-s-inner .cm-string {
    color: #C3E88D;
}

.cm-s-inner .cm-string-2 {
    color: #f07178;
}

.cm-s-inner .cm-comment {
    color: #546E7A;
}

.cm-s-inner .cm-variable {
    color: #f07178;
}

.cm-s-inner .cm-tag {
    color: #FF5370;
}

.cm-s-inner .cm-meta {
    color: #FFCB6B;
}

.cm-s-inner span.cm-attribute {
    color: #C792EA;
}

.cm-s-inner .cm-property {
    color: #C792EA;
}

.cm-s-inner .cm-qualifier {
    color: #DECB6B;
}

.cm-s-inner .cm-variable-3,
.cm-s-inner .cm-type {
    color: #DECB6B;
}


.cm-s-inner .cm-error {
    color: rgba(255, 255, 255, 1.0);
    background-color: #FF5370;
}

.cm-s-inner .CodeMirror-matchingbracket {
    text-decoration: underline;
    color: white !important;
}